// components/common/share-image/index.js
import componentBehavior from '../../../behaviors/component';
import { COMPONENT_OPTIONS, TARGET_TYPE } from '../../../constants/common';
import { saveImage, tipSuccess, tipError, getMenuButtonBoundingClientRect, showLoading, hideLoading } from '../../../common/env';
import { createWxml as createBrandWxml, createStyle as createBrandStyle, createSize as createBrandSize } from './create-brand';
import { createWxml as createStoreWxml, createStyle as createStoreStyle, createSize as createStoreSize } from './create-store';
import { createWxml as createUserWxml, createStyle as createUserStyle, createSize as createUserSize } from './create-user';
import { createWxml as createActivityWxml, createStyle as createActivityStyle, createSize as createActivitySize } from './create-activity';
import { createWxml as createLotteryWxml, createStyle as createLotteryStyle, createSize as createLotterySize } from './create-lottery';
import { createWxml as createSigninWxml, createStyle as createSigninStyle, createSize as createSigninSize } from './create-signin';
import { getQRcode } from '../../../api/common';

Component({
    behaviors: [componentBehavior],
    options: {
        ...COMPONENT_OPTIONS,
    },
    properties: {
        show: {
            type: Boolean,
            value: false,
        },
        shareImageInfo: {
            type: Object,
            value: null,
        },
        shareImageMessageInfo: {
            type: Object,
            value: null,
        },
        containsHeader: {
            type: Boolean,
            value: true,
        },
    },
    observers: {
        'shareImageInfo': function(info) {
            const { show } = this.data;
            if (show && info) {
                let { type = TARGET_TYPE.brand, shareInfo } = info;
                let size, width, height;
                if (type === TARGET_TYPE.brand) {
                    size = createBrandSize(shareInfo);
                    width = size.width;
                    height = size.height;
                } else if (type === TARGET_TYPE.store) {
                    size = createStoreSize(shareInfo);
                    width = size.width;
                    height = size.height;
                } else if (type === TARGET_TYPE.user) {
                    size = createUserSize(shareInfo);
                    width = size.width;
                    height = size.height;
                } else if (type === 'activity') {
                    size = createActivitySize(shareInfo);
                    width = size.width;
                    height = size.height;
                } else if (type === 'lottery') {
                    size = createLotterySize(shareInfo);
                    width = size.width;
                    height = size.height;
                } else if (type === 'signin') {
                    size = createSigninSize(shareInfo);
                    width = size.width;
                    height = size.height;
                }
                this.setData({ width, height, filePath: '' }, () => {
                    this.widget = this.selectComponent('.widget');
                    this._handleRender();
                });
            }
        },
    },
    data: {
        width: '',
        height: '',
        styleValue: '',
        filePath: '',
    },
    lifetimes: {
        attached() {
            const rect = getMenuButtonBoundingClientRect();
            const { containsHeader } = this.data;
            this.setData({
                styleValue: `padding-top: ${containsHeader ? rect.bottom + 10 : rect.top}px;`,
            });
        },
    },
    methods: {
        async _handleGetQrcode() {
            const { path } = this.data.shareImageMessageInfo;
            const pathArr = path.replace(/^\//, '').split('?');
            const url = await getQRcode({
                page: pathArr[0],
                scene: pathArr[1],
            });
            return url;
        },
        async _handleRender() {
            showLoading('图片生成中...');
            const qrcode = await this._handleGetQrcode();
            const { type = TARGET_TYPE.brand, shareInfo, userInfo } = this.data.shareImageInfo;
            let _wxml, _style;
            if (type === TARGET_TYPE.brand) {
                _wxml = createBrandWxml(shareInfo, qrcode);
                _style = createBrandStyle(shareInfo);
            } else if (type === TARGET_TYPE.store) {
                _wxml = createStoreWxml(shareInfo, qrcode);
                _style = createStoreStyle(shareInfo);
            } else if (type === TARGET_TYPE.user) {
                _wxml = createUserWxml(shareInfo, qrcode);
                _style = createUserStyle(shareInfo);
            } else if (type === 'activity') {
                _wxml = createActivityWxml(shareInfo, qrcode);
                _style = createActivityStyle(shareInfo);
            } else if (type === 'lottery') {
                _wxml = createLotteryWxml(shareInfo, qrcode);
                _style = createLotteryStyle(shareInfo);
            } else if (type === 'signin') {
                _wxml = createSigninWxml(userInfo, shareInfo, qrcode);
                _style = createSigninStyle(shareInfo);
            }
            this.container = await this.widget.renderToCanvas({ wxml: _wxml, style: _style });
            await this._handleRenderToImage();
            hideLoading();
        },
        async _handleRenderToImage() {
            const file = await this.widget.canvasToTempFilePath();
            this.setData({
                filePath: file.tempFilePath,
            });
        },
        async handleSelect(e) {
            const { type } = e.currentTarget.dataset;
            const { filePath } = this.data;
            if (type === 'download') {
                const flag = await saveImage(filePath);
                flag ? tipSuccess('保存成功！') : tipError('保存失败！');
            }
            this.handleClose();
        },
        handleClose(e) {
            this.setData({
                show: false,
            });
            this.triggerEvent('close');
        },
    }
})
